.Toolkit_Tabs {
}

.Toolkit_TabHead {
  display: flex;
  flex-direction: row;
  margin-bottom: 1rem
}

.Toolkit_TabControl {
  border-bottom: 3px solid transparent;
  color: var(--bs-primary-color);
  padding: 0 1rem;
  font-size: .9rem;
  line-height: 2;
  font-stretch: semi-condensed;
  transition: border-color 150ms ease-in-out;
  margin-bottom: -1px;
}

.Toolkit_TabControl.active {
  border-color: var(--bs-secondary-color);
}

.Toolkit_TabPanel {
    position: relative;
}

.Toolkit_TabPanel:not(.active) {
  display: none;
}

.Toolkit_TabPanel:has(.Toolkit_Preview) {
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem
}

.Toolkit_Loader {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .2rem;
    position: absolute;

    svg {
        animation: rotating 1s linear infinite;
    }
}

.Toolkit_Preview {
    width: 100%;
    transition: opacity .250s linear;
    border-radius: .75rem;
    opacity: 1;

    &.loading {
        opacity: 0;
    }
}
